<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass ,key) in itemClasses" :key="key" :class="itemClass"  class="star-item"></span>
    </div>
</template>
<script>
const LENGTH=5
const CLS_ON="on"
const CLS_HALF='half'
const CLI_OFF='off'

export default {
    props:{
        size:{
            type:Number
        },
        score:{
            type:Number
        }
    },
    computed:{
        starType() {
            return 'star-'+ this.size
        },
        itemClasses() {
            let rasult=[]
            let score=Math.floor(this.score * 2 ) / 2
            let hasDecimal=score %1 !==0
            let integer=Math.floor(score)
            for(let i=0 ;i<integer ;i++){
                rasult.push(CLS_ON);
            }
            if(hasDecimal){
                rasult.push(CLS_HALF);
            }
            while (rasult.length < LENGTH ){
                rasult.push(CLI_OFF)
            }
            return rasult;
        }
    }
}
</script>
<style scoped lang="stylus">
@import "../../common/stylus/mixin.styl";
    .star
        .star-item
            display: inline-block
            background-repeat:no-repeat
        &.star-48
            .star-item
                width: 20px
                height: 20px
                margin-right: 22px
                background-size:20px 20px
                &:last-child
                    margin-right:0
                &.on
                    bg-image('star48_on')
                &.half
                    bg-image('star48_half')
                &.off
                    bg-image('star48_off')
        &.star-36
            .star-item
                width: 15px
                height: 15px
                margin-right: 16px
                background-size:15px 15px
                &:last-child
                    margin-right:0
                &.on
                    bg-image('star36_on')
                &.half
                    bg-image('star36_half')
                &.off
                    bg-image('star36_off')
        &.star-24
            .star-item
                width: 10px
                height: 10px
                margin-right: 3px
                background-size:10px 10px
                &:last-child
                    margin-right:0
                &.on
                    bg-image('star24_on')
                &.half
                    bg-image('star24_half')
                &.off
                    bg-image('star24_off')  
</style>
